<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" >
.dialog { width: 300px; height: 200px; margin:auto;box-shadow: 2px 2px 4px #ccc; background-color: #f1f1f1; border: solid 1px #aaa; border-radius: 4px; overflow: hidden; display: none; }
.dialog .title { font-size: 16px; font-weight: bold; color: #fff; padding: 6px; background-color: #404040; }
.dialog .close { width: 20px; height: 20px; margin: 3px; float: right; cursor: pointer; color: #fff; }
</style>
<meta charset="utf-8">
</head>
<body> 
<input type="button" value="打开对话框" onclick="openDialog();"/>
<div id="dlgTest" class="dialog"><span class="close">&times;</span>
    <div class="title">对话框标题栏</div>
    <div class="content">对话框内容框</div>
</div>
<script type="text/javascript">
function Dialog(id){
    this.id=id;
    var that=this;
    document.getElementById(id).children[0].onclick=function(){
		that.close();
    }
}
Dialog.prototype.show=function(){
    var dlg=document.getElementById(this.id);
    dlg.style.display='block';
    dlg=null;
}
Dialog.prototype.close=function(){
    var dlg=document.getElementById(this.id);
    dlg.style.display='none';
	dlg=null;
}
function openDialog(){
    var dlg=new Dialog('dlgTest');
    dlg.show();
}
</script>
</body>
</html>